<template>
    <div class="content_box">
        <!-- 公告 -->
        <div class="notice_box">
            <img src="@/assets/tips.png" alt="" />
            <span>公告： </span>
            <p>
                2024-02-10起，平台升级案件规定属性，更加便利查看或编辑，如遇问题，可以向上级反馈！
            </p>
            <span>查看详情 </span>
        </div>
        <div class="main-box">
            <p class="main-title">罚没管理</p>
            <!-- 搜索 -->
            <search-component :search-options="searchOptions" :params="params" @search="onSearch"
                @reset="onReset"></search-component>

            <!-- 切换 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :name="'first' + index" v-for="(item, index) in tabList" :key="index">
                    <template #label>
                        <span>{{ item.label }}
                            <span v-if="tabListIndex == index"
                                style="color: red; font-size: 12px">({{ total }}笔)</span></span>
                    </template>
                </el-tab-pane>

            </el-tabs>

            <!-- 列表 -->
            <el-table v-loading="loading" size="1100" class="table_list" :data="tableData">
                <el-table-column prop="name" label="案件信息" min-width="450">
                    <template #default="scope">
                        <div class="ces_box">
                            <div class="code">
                                <p>案件编号 {{ scope.row.case_code }}<img @click="copyCode(111)" src="@/assets/copy.png" alt="" />
                                </p>
                                <p>案件生成时间 {{ scope.row.createtime }}</p>
                            </div>
                        </div>
                        <div class="list">
                            <div class="aj_msg">
                                <p class="jiao">退<span class="new" v-if="scope.row.is_new">新</span></p>
                                <div class="name">
                                    <p class="title">
                                        案件名称：{{ scope.row.case_title }}
                                    </p>
                                    <p class="text">嫌疑人：{{ scope.row.crime_name }}</p>
                                    <p class="text"><span
                                            style="margin-right:20px;">起算日期：{{ scope.row.start_date }}</span><span>起算日期：{{ scope.row.end_date }}</span>
                                    </p>
                                    <div class="label">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="罚没状态" sortable min-width="120">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 2" type="warning">待发起审批</el-tag>
                        <el-tag v-if="scope.row.status == 3" type="primary">审批中</el-tag>
                        <el-tag v-if="scope.row.status == 4" type="warning">待付款</el-tag>
                        <el-tag v-if="scope.row.status == 5" type="primary">银行处理中</el-tag>
                        <el-tag v-if="scope.row.status == 6" type="danger">退款失败</el-tag>
                        <el-tag v-if="scope.row.status == 7" type="success">已完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age2" label="主办单位" min-width="180">
                    <template #default="scope">
                        <p style="color:#44567C">{{ scope.row.department_name }}</p>
                        <p style="color:#44567C">办案人员：{{ scope.row.baar_xm }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="amount_alias" label="退费金额 " min-width="200" />
                <el-table-column prop="last_operation_time" label="退款申请时间" min-width="130">
                    <template #default="scope">
                        <p style="color:#44567C">{{ scope.row.last_operation_time ? scope.row.last_operation_time : '--' }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="age5" label="退款完成时间 " min-width="180" sortable></el-table-column>
                <el-table-column label="操作" min-width="380" align="right" fixed="right">
                    <template #default="scope">
                        <el-button v-if="scope.row.show_exception" @click="warningClick" size="mini" type="danger"><el-icon
                                class="el-icon--right">
                                <Warning />
                            </el-icon><span style="margin-left: 6px;">查看异常</span></el-button>
                        <el-button v-if="scope.row.show_refund" size="mini" type="primary"
                            @click="openJf(scope.row.id)">发起罚没</el-button>
                        <el-button size="mini" type="primary" @click="toSee(scope.row.id)">查看</el-button>

                        <el-dropdown @click="handleCommand" placement="bottom-end" @visible-change="openButton(scope.row)"
                            style="margin-left:12px" trigger="click">
                            <el-button type="primary">
                                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu :split-button="false">
                                    <el-dropdown-item @click="downClick(1, scope.row.id, scope.row.bail_id)"
                                        divided>案件延期申请</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(2, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.update_origin_attr" divided>更新原始凭证</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(4, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.save_bail_date" divided>修改办案日期</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(5, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.entrust" divided>委托协办单位</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(6, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.save_bail_bank" divided>修改办案预留银行卡</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(7, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.update_department" divided>修改办案单位</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(8, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.save_bail_police" divided>修改办案人</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(9, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.save_crime_info" divided>完善当事人信息</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(10, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.revoke_qrcode" divided>撤销缴费申请</el-dropdown-item>
                                    <el-dropdown-item @click="downClick(3, scope.row.id, scope.row.bail_id)"
                                        v-if="anniuStatus.close_bail" divided>
                                        <el-button style="width:100%" type="primary">关闭本案</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination :page-size="params.pagesize" :size="params.page" layout="total, prev, pager, next" :total="total"
                @current-change="handleCurrentChange" />
            </div>
        </div>


        <!-- 编辑或新增页 -->
        <el-drawer v-if="dialog" size="46%" v-model="dialog" :with-header="false">
        <form-model :bailId="id" :mdl="mdl" :parent-id="parentId" @closeModel="handleCloseDialog"/>
        </el-drawer>


        <!-- 完善办案日期 -->
        <el-dialog :show-close="false" v-model="updateDateShow">
        <update-bail-date :id="id1" @closeDrawer="closeDrawer"/>
        </el-dialog>

        <!-- 案件延期申请 -->
        <el-dialog :show-close="false" v-model="updateDelayShow">
        <update-bail-delay :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
        </el-dialog>

        <!-- 修改办案预留银行卡 -->
        <el-dialog v-model="updateBankShow" :show-close="false">
        <update-bank :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
        </el-dialog>

        <!-- 委托协办单位 -->
        <el-dialog v-model="updateEntrustShow" :show-close="false">
        <update-entrust :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
        </el-dialog>

        <!-- 修改办案人 -->
        <el-dialog v-model="updatePoliceShow" :show-close="false">
        <update-police :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
        </el-dialog>

        <!-- 修改办案单位 -->
        <el-dialog v-model="updateUnitShow" :show-close="false">
        <update-unit :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
        </el-dialog>

        <!-- 完善当事人信息 -->
        <el-dialog v-model="updateUser" :show-close="false">
        <update-user :bailId="bailId" :id="id1" @closeDrawer="closeDrawer"/>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";

import FormModel from "./components/FormModel.vue";
import UpdateBailDate from "./components/UpdateBailDate.vue";
import UpdateBailDelay from "./components/UpdateBailDelay.vue";
import UpdateBank from "./components/UpdateBank.vue";
import UpdateEntrust from "./components/UpdateEntrust.vue";
import UpdatePolice from "./components/UpdatePolice.vue";
import UpdateUnit from "./components/UpdateUnit.vue";
import UpdateUser from "./components/UpdateUser.vue";

import { useRouter, useRoute } from "vue-router";

// 接口
import { getConfiscateList, fmIndexList } from "@/api/bond/confiscate";
import { getPublic, getDepartmentList } from "@/api/public";
import { getPlayMore} from "@/api/bond/pay";

const router = useRouter();

let loading = ref(false);

let id = ref(0) // 主表id

// 栏目切换
let tabList = ref([])
let tabListIndex = ref(0)
let activeName = ref('first0') // 切换的值

const handleClick = (e: { index: any; }) => {
    let index = e.index
    tabListIndex.value = index
    params.value.status = tabList.value[index].value
    getList(false, null)
}


// 搜索参数
let searchOptions = ref(
    [
        { label: "案件编号：", type: "input", prop: "case_code", placeholder: "请输入" },
        {
            label: "保证金金额：",
            type: "input-range",
            prop: "min_amount",
            prop1: "max_amount",
            placeholder: "请输入",
        },
        {
            label: "保证金缴费状态：",
            type: "select",
            prop: "status",
            placeholder: "请选择",
            options: [],
        },
        {
            label: "嫌疑人姓名：",
            type: "input",
            prop: "crime_name",
            placeholder: "请输入",
        },
        {
            label: "办案单位：",
            type: "cascader",
            prop: "department_id",
            placeholder: "请选择",
            options: [],
        },
        {
            label: "案件起始时间：",
            type: "date-range",
            prop: "name7",
            placeholder: "请选择",
            // options:agentOptions.value,
        },
    ]
)

// 参数
let params = ref({
    // case_code: '',
    // crime_name: '',
    // min_amount: Number(0),
    // max_amount: Number(0),
    // status: Number(0),
    // keyword: '',
    // department_id: '',
    // start_time: '',
    // end_time: '2024-09-17',
    page: 1,
    pagesize: 10,
    status: -1,
});

// 表单重置
const onReset = () => { };

// 表单搜索
const onSearch = (searchData: any) => {

};

// 分页
const handleCurrentChange = (e: any)=>{
  params.value.page = e
  getList(false,null)
}

// 关闭dialog方法
const handleCloseDialog = () => {
  dialog.value = false;
  getList(false,null)
};

// 列表
let tableData = reactive([]);
let total = ref(0)
const getList = async (status: boolean,obj: {} | null) => {
  loading.value = true
  let data = {}
  if(status){
    data = obj
  }else{
    data = params.value
  }
  await fmIndexList(data).then(res=>{
    if (res.code == 1) {
      tableData = res.data.rows
      loading.value = false
      total.value = res.data.total
    }
  })
}

// 获取公共数据
const getPublicSource = async () => {
    await getPublic().then(res => {
        if (res.code == 1) {
            tabList.value = res.data.process_status
            tabList.value.unshift({
                label: '全部', value: -1
            })
        }
    })
}

// 获取部门
const getBumenList = async () => {
    await getDepartmentList().then(res => {
        if (res.code == 1) {
            res.data = JSON.parse(JSON.stringify(res.data).replace(/department_id/g, 'value'))
            res.data = JSON.parse(JSON.stringify(res.data).replace(/name/g, 'label'))
            res.data = JSON.parse(
                JSON.stringify(res.data).replace(/child/g, "children")
            );
            searchOptions.value[4].options = res.data
        }
    })
}

// 更多按钮-操作
let anniuStatus = ref({})// 按钮对象
const openButton = async(scope: { id: any; })=>{
  getPlayMore({process_id:scope.id}).then(res=>{
    if(res.code == 1){
      anniuStatus.value = res.data
    }
  })
}

// 按钮点击
let id1 = ref(0) // 主表id
let bailId = ref(0) // 案件id
let updateDateShow = ref(false) // 完善办案日期弹窗
let updateDelayShow = ref(false) // 案件延期申请弹窗
let updateBankShow = ref(false) // 修改办案预留银行卡
let updateEntrustShow = ref(false) // 委托协办单位
let updatePoliceShow = ref(false) // 修改办案人
let updateUnitShow = ref(false) // 修改办案单位
let updateUser = ref(false) // 完善当事人信息

const downClick = (num: number,eId: number,aId: number)=>{
  id1.value = eId
  bailId.value = aId
  if(num == 1){ //案件延期申请
    updateDelayShow.value = true
  }
  if(num == 7){ //修改办案单位
    updateUnitShow.value = true
  }
  if(num == 4){ //修改办案日期
    updateDateShow.value = true
  }
  if(num == 5){ //委托协办单位
    updateEntrustShow.value = true
  }
  if(num == 8){ //修改办案人
    updatePoliceShow.value = true
  }
  if(num == 9){ //完善当事人信息
    updateUser.value = true
  }
  if(num == 6){ //修改办案预留银行卡
    updateBankShow.value = true
  }
 
}

// 关闭弹窗
const closeDrawer=()=>{
  updateDateShow.value = false
  updateDelayShow.value = false
  updateBankShow.value = false
  updateEntrustShow.value = false
  updatePoliceShow.value = false
  updateUnitShow.value = false
  updateUser.value = false
}

// 参数
let dialog = ref(false);
let mdl = reactive({});
let parentId = ref<Number>(0);

// 打开弹窗
const openJf = (e: number) => {
  dialog.value = true;
  id.value = e
};

/*
* 查看
*/
const toSee = (id: any) => {
  router.push({ name: "BondConfiscateSee", params: { id } });
};

onMounted(() => {

    // 列表
    getList(false,null)

    getPublicSource()

    getBumenList()
});
</script>
<style scoped lang="scss">
    .ces_box{
  width: 100%;
  position: absolute;
  left:0;
  top:0;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  font-weight: 400;
  height: 57px;
  align-items: center;
  border-radius: 8px 8px 0px 0px;
  background: #F2F4F7;
  .up_day{
    margin-right:13px;
    font-size: 14px;
    color: #999999;
  }
}
.ces_box .code{
  display: flex;
  margin-left:24px;
  font-size: 14px;
  color: #333333;
  p{
    margin-right:46px;
    display: flex;
    align-items: center;
    img{
      width: 15px;
      height: 15px;
      margin-left: 6px;
      cursor: pointer;
    }
  }
}
::v-deep .el-table .el-table__cell{
  position: initial;
}
::v-deep .el-table__body tr{
  position: relative;
  overflow: hidden;
}
.el-table {
  // --el-table-row-hover-bg-color: #1C55D1
}

</style>
  